<template>
  <div>
    <div @keypress.native="()=>console.log('你好')">
      <img :src="src" class="image" :style="offsettop" lazy :fit="'cover'">

      <div class="tool">
        <div class="box">
          <input type="file" ref="image" name="topfile" id="topfile">
          <el-tooltip class="item" effect="dark" content="更换图片" @click.native="select_top_file" placement="top-start">
            <i class="el-icon-picture-outline"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-show="!more" @click.native="moreset" content="图片设置"
                      placement="top-start">
            <i class="el-icon-more-outline"></i>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" v-show="more" @click.native="moresave" content="保存修改"
                      placement="top-start">
            <i class="el-icon-check"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userimage",
  data() {
    return {
      src: 'http://127.0.0.1:8000/show_topimage?token=' + localStorage.getItem("token"),
      more: false,
      top_offset: 0
    }
  }, mounted() {
    window.addEventListener("keydown", this.KeyDown);
    let token = localStorage.getItem("token");
    this.$axios.post(
        "/get_top_set",
        {token}
    ).then(
        (res) => {
          this.top_offset = res.data
        }
    )
  },
  computed: {
    offsettop: {
      get() {
        return {
          'objectPosition': "0px " + this.top_offset + "%"
        }
      }

    }
  },
  methods: {
    moresave() {
      this.more = false;
      this.$axios.post(
          `/top_set`,
          {
            token: localStorage.getItem('token'),
            offset: this.top_offset
          }
      ).then(
          (response) => {
            this.$notify.success("保存完毕")
          }
      )
    },
    moreset() {
      this.more = true;
      this.$notify.info("使用上下键调整图片吧")
    },
    KeyDown(event) {
      if (this.more === false) return
      const e = event || window.event || arguments.callee.caller.arguments[0];
      event.preventDefault();
      let key = e.keyCode;		//键盘码值 keycode
      if (key == 37) { //左
        console.log("left");
      } else if (key == 38) {	//上
        this.offset('upper');
      } else if (key == 39) {	//右
        console.log("right");
      } else if (key == 40) {	//下
        this.offset('down')
      }
    },
    offset(method) {
      if (method == 'upper') {
        this.top_offset += 2
      } else if (method == "down") {
        this.top_offset -= 2
      }
      console.log(this.top_offset)

    },
    select_top_file() {

      let file_inp = document.getElementById("topfile");
      file_inp.click();
      console.log("选择")

      file_inp.onchange = (event) => {
        console.log("组装开始")
        let file = event.target.files[0];
        let form = new FormData();
        console.log("组装中")
        form.append("image", file);
        form.append("token", localStorage.getItem("token"))
        let request_body = {
          method: "POST",
          data: form,
          url: "/upload_top"
        }
        console.log("组装结束")
        this.src = URL.createObjectURL(file)
        this.$axios(
            request_body
        )
      }
    }
  }
}
</script>

<style scoped lang="less">
@top: -40px;
.image {
  height: 14vw;
  width: 100%;
  margin-bottom: @top;
}

.image {
  object-fit: cover;
  object-position: 0px -40px;
}

.tool {
  position: relative;
  top: @top;
  color: white;
  display: flex;
  justify-content: right;
  width: 90%;
  margin: auto;
  user-select: none;
  cursor: pointer;

  .box {
    background-color: rgba(233, 233, 233, .4);
    /*color: black;*/
    font-size: 30px;

    i {
      margin: 0px 20px;
    }
  }

  #topfile {
    display: none;
  }
}

</style>